{% extends 'shop/base.html' %}
{% block ext_css %}
{% endblock %}
{% block content %}
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">商城相关信息</h1>
                        <div class="col-sm-6">
                        </div>
                    </div>
                </div>
            </div>
            <section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-info">
                                <div class="inner">
                                    <h3>{{ order_count }}</h3>
                                    <p>订单数量</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-bag"></i>
                                </div>
                                <a href="{{ url_for('members.index') }}" class="small-box-footer">更多 <i
                                        class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-success">
                                <div class="inner">
                                    <h3>{{ member_count }}</h3>
                                    <p>会员数量</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-stats-bars"></i>
                                </div>
                                <a href="{{ url_for('members.index') }}" class="small-box-footer">更多 <i
                                        class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                        <div class="col-lg-4 col-6">
                            <div class="small-box bg-warning">
                                <div class="inner">
                                    <h3>{{ goods_count }}</h3>
                                    <p>商品数量</p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-person-add"></i>
                                </div>
                                <a href="{{ url_for('members.index') }}" class="small-box-footer">更多 <i
                                        class="fas fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <section class="col-lg-6 connectedSortable">
                            <div class="card card-danger">
                                <div class="card-header">
                                    <h3 class="card-title">商品信息统计</h3>
                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div id="Chart1" style="width: 600px;height:400px;"></div>
                                </div>
                            </div>
                        </section>
                        <section class="col-lg-6 connectedSortable">
                            <div class="card card-success">
                                <div class="card-header">
                                    <h3 class="card-title">会员注册情况</h3>
                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                        <button type="button" class="btn btn-tool" data-card-widget="remove">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="chart">
                                        <div id="Chart2" style="width: 600px;height:400px;"></div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </section>
        </div>
        <script src="{{ url_for('static',filename='js/echarts.min.js' ) }}"></script>
        <script type="text/javascript">
            //基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('Chart1'));
            //指定图表的配置项和数据
            var option = {
                title: {
                    text: '商品信息统计'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: {{ goods_labels|safe }}
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: {{ goods_datas }},
                }]
            };
            // 使用指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>

        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('Chart2'));
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '会员性别分布饼图',
                    x: 'center'
                },
                tooltip: {},
                legend: {
                    data: ['注册量']
                },
                series: [{
                    name: '性别',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'left',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    itemStyle: {
                        color: function (colors) {
                            var colorList = [
                                '#fc8251',
                                '#5470c6',
                                '#9A60B4',
                                '#ef6567',
                                '#f9c956',
                                '#3BA272'
                            ];
                            return colorList[colors.dataIndex];
                        }
                    },
                    data: [
                        {value:{{ maleCount }}, name: "男性"},
                        {value:{{ femaleCount }}, name: "女性"}
                    ],
                }],
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ["男性", "女性"]
                }
            };
            // 使用指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
{% endblock %}